<template>

    <!--页面的头部-->
    <v-system-bar app
                  height="50"
                  color="#fff"
                  class="spacing-playground   bg showOrder grey lighten-3"
    >
            <v-container fluid
                         class="spacing-playground  pl-12 ml-12 "
            >
                <v-row
                        dense class="ml-7"
                >
                    <v-col cols="auto" align-self="center">
                        <v-img
                                src="@/assets/logo2.png"
                                max-width="200"
                                min-width="200"
                                width="200"
                                height="40"
                                min-height="40"
                                max-height="40"
                        ></v-img>


                    </v-col>
                   <!-- <v-col cols="auto">
                        编程学习notes
                    </v-col>-->
                    <v-col cols="auto" align-self="center">

                        <v-btn
                                height="40"
                                mih-height="40"
                                max-height="40"
                                text large block href="/home">
                            <span class="font_span">首页</span>
                        </v-btn>

                    </v-col>
                    <v-col cols="auto" align-self="center">


                        <v-btn
                                height="40"
                                mih-height="40"
                                max-height="40"
                                text large block href="https://gitee.com/lijiedong" target="_blank"><span class="font_span">代码仓库</span></v-btn>
                    </v-col>
                    <v-col cols="2" align-self="center">
                        <!--搜索框-->
                        <v-text-field

                                dense
                                height="40"
                                mih-height="40"
                                max-height="40"
                                label="搜索"
                                single-line
                                outlined
                                textarea
                                hide-details
                        ></v-text-field>

                    </v-col>
                    <v-col cols="auto">
                        <v-btn
                                block text
                                width="36"
                                min-width="36"
                                max-width="36"
                        >

                            <v-icon large>mdi-magnify</v-icon>


                        </v-btn>
                    </v-col>
                </v-row>
            </v-container>
    </v-system-bar>

</template>

<script>

  export default {
    name: 'Header'
  }
</script>

<style scoped lang="less">

    /*设置搜索框的样式*/
    .search {
        height: 50px;
    }

    .bg {
        background-color: green ;
    }

</style>